<template>
  <div class="relationListWrapper">
    <Resizeable :driver="2" :leftWidthLimit="{ min: 370, max: 900 }">
      <template #left>
        <SearchBlock @doSearch="conditionhandler" @changeModel="changeModel">
        </SearchBlock>
        <div class="listWrapper">
          <!--当前登录用户的好友列表-->
          <div class="addBookWrapper scroller" v-if="model==0">
            <div class="manageTip"><UsergroupAddOutlined /><span>通讯录管理</span></div>
            <div class="bookWrappers">
              <div class="bookWrapper">
                <div class="title">新的朋友</div>
                <div class="content" :class="{active: showNewFriend}" @click="showNewFriend=true">
                  <div class="actvator"><img src="@/assets/images/newfriend.png" /></div>
                  <span>新的朋友</span>
                </div>
              </div>
              <div class="bookWrapper userList">
                <div class="userLetterBlock" v-for="item in friendStore.friendsRelationComputed" :key="item.letter">
                  <div class="title">{{item.letter}}</div>
                  <div class="usersWrapper">
                    <UserItem v-for="user in item.names" :key="user.id" :user="user" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--好友列表搜索结果-->
          <div class="searchResult" ref="result" v-if="model==1">
            <div class="resultTitle">联系人</div>
            <div class="user" :class="{active: index===0}" v-for="(user, index) in friendsComputed" :key="user.id"><UserItem class="user" :user="user" /></div>
          </div>
          <!--搜索账号结果-->
          <div class="searchResult remoteSearch" ref="result" v-if="model==2 && condition!==''">
            <div class="emptyWrapper" v-if="!foundUserInfo && found">
              无法找到该用户，请检查你填写的账号是否正确
            </div>
            <div class="searchWrapper" @click="findUserWithRemote">
              <div class="iconConditionWrapper" ref="searchRef">
                <div class="imgWrapper" >
                  <SearchOutlined style="font-size: 20px;color: white;"/>
                </div>
                <span>搜索：</span>
                <div class="condition">{{ condition }}</div>
              </div>
              <RightOutlined style="font-size: 13px;color: #adadad;"/>
            </div>
          </div>
        </div>
      </template>
      <template #right>
        <div class="rightContent" v-if="showNewFriend">
          <CommonHeader>
            <div class="chatHeader">
              <h3>新的朋友</h3>
            </div>
          </CommonHeader>
          <FriendRequestContent />
        </div>
        <template v-if="!showNewFriend">
          <div class="empty">
            <WechatFilled />
          </div>
        </template>
      </template>
    </Resizeable>
  </div>
  <Teleport to="#overlayTarget" v-if="foundUserInfo">
    <UserInfo :userInfo="foundUserInfo" :pos="pos" :addRequest="addRequest"/>
  </Teleport>
</template>
<script lang="ts" setup>
import Pubsub from 'pubsub-js'
import { searchUser } from '@/lib/api'
import { UsergroupAddOutlined, RightOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { ref, onMounted, reactive, onUnmounted, computed } from 'vue'
// 导入组件
import FriendRequestContent from '@/components/FriendRequestContent.vue'
import UserItem from '@/components/UserItem.vue'
import useChartStore from '@/stores/chatStore'
import useFriendStore from '@/stores/friendStore'
import UserInfo from '@/components/UserInfo.vue'
import SearchBlock from '@/components/SearchBlock.vue'
import CommonHeader from '@/components/CommonHeader.vue'
import Resizeable from '@/components/custom/Resizeable/index.vue'
// 定义属性
const chartStore = useChartStore()
const friendStore = useFriendStore()
const condition = ref("")
const model = ref(0) // 0:通讯录 1:搜索结果 2:搜索账号
const found = ref(true) //是否找到用户
const foundUserInfo = ref(null) //查找到的用户信息
const addRequest = ref(false)
const searchRef = ref(null)
const showNewFriend = ref(false)
const pos = reactive({
  left: 0,
  top: 0
})
const friendsComputed = computed(() => { 
  const list = chartStore.friendsRelationComputed
  const firends = Array.from(list).reduce((prev: Array<any>, current: any)=> {
    return [...prev, ...current.names.map((item1: any)=> item1)]
  }, [])
  return firends.filter((item: any)=> condition.value === '' ? true : item.username.indexOf(condition.value)>-1)
})

// 查询用户
const findUserWithRemote = () => {
  const react = searchRef.value.getBoundingClientRect()
  pos.left = react.left + react.width + 25
  pos.top = react.top - 10
  searchUser(condition.value).then((res: any)=> {
    if(res.code === 0) {
      found.value = true
      foundUserInfo.value = res.data.user
      addRequest.value = !
      
      res.data.isRelationShip
    } else {
      found.value = false
    }
  })
}
onMounted(() => {
  // 监听筛选事件
  Pubsub.subscribe('filter-users-model', (msg: any, data: any) => {
    if(model.value != data) {
      model.value = data
      condition.value = ''
    }
  })
  Pubsub.subscribe('search-users-value', (msg: any, data: any) => {
    condition.value = data
  })

  PubSub.subscribe('closeWindowModal', ()=> {
    found.value = false
    foundUserInfo.value = null
  })
})
onUnmounted(()=> {
  Pubsub.unsubscribe('filter-users-model')
})
</script>
<style lang="less" scoped>
@import '@/assets/base.less';
.relationListWrapper {
  width: 100%;
  background-color: #f7f7f7;
}
.addBookWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  .manageTip {
    width: 90%;
    background-color: white;
    margin: 15px auto;
    padding: 8px;
    text-align: center;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .bookWrappers {

    .bookWrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0 auto;

      padding-bottom: 20px;
      border-bottom: 1px solid #dcdcdc;
      margin-top: 20px;
      box-sizing: border-box;
      >.title {
        margin-left: 3.5%;
      }
      .content {
        &.active {
          background-color: #cfcfcf;
        }
        &:hover {
          background-color: #dedede;
        }
      }
      &.userList {
        padding: 0;
        .userLetterBlock {

          padding-top: 5px;
          .title {
            padding: 0 3.5%;
            font-size: 13px;
          }
        }

      }
      .title {
        color: #9f9f9f;
        font-size: 13px;
      }
      .content {
        margin-top: 10px;
        display: flex;
        align-items: center;
        padding: 10px 3.5%;
        .actvator {
          background-color: #fa9d3a;
          width: 36px;
          height: 36px;
          img {
            width: 36px;
            height: 36px;
          }
        }
        span {
          font-size: 14px;
          color: #000;
          margin-left: 12px;
        }
      }
      .usersWrapper {
      }
    }
  }
}
.searchResult {
  height: 100%;
  background: white;
  &.remoteSearch {
    background-color: unset;
    .emptyWrapper {
      padding: 15px;
      font-size: 14px;
      text-align: center;
      color: #797979;
    }
    .searchWrapper:hover {
      background-color: #cfcfcf;
    }
    .searchWrapper {
      background-color: white;
      display: flex;
      align-items: center;
      padding: 10px;
      .iconConditionWrapper {
        display: flex;
        align-items: center;
        flex: 1;
        .imgWrapper {
          width: 35px;
          height: 35px;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #0fb75f;
        }
        >span {
          font-size: 14.5px;
          color: #000;
          margin-left: 10px;
        }
        .condition {
          color: #0fb75f;
          font-size: 14px;
        }
      }
    }
    
  }
  .resultTitle {
    padding-left: 3%;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    color: #757575;
  }
  .active {
    background-color: #cfcfcf;
  }
}
.listWrapper {
  flex: 1;
  background-color: #e6e6e6;
  overflow: hidden;
}
.chatHeader {
  width: 97%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.empty {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  color: #e9e9e9;
}
.otherHeader {
  width: 97%;
  margin: 0 auto;
}
</style>
